前一篇有提到在 function component 沒有 this，不能使用 this.state 及 this.setState()，這時候我們就需要使用 Hook 的 useState 解決這個問題。
useState 會回傳一對值 - 目前的 state 和 一個可以更新 state 的 function。
用法：
const [state, setState] = useState(initialState)
state 存放 state 的值，setState 設定 state 的值（用來更新 state），而 initialState 為第一次 render 時回傳的 state 初始值。
setState(newState)
setState function 用來更新 state。

const [state, setState] = useState(initialState)　為解構賦值後的寫法，下面會舉例非解構賦值的寫法。

將前一篇 class component state 改成 function component 的 useState：

import React, { useState } from "react";
const Hookstate = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h3>Hook - useState</h3>
      <p>You clicked {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click
      </button>
    </div>
  );
};
export default Hookstate;

前面有提到 useState 的語法是解構賦值，以上面程式碼中的 count 為例，const [count, setCount] = useState(0)，在解構賦值的寫法其實就是：

const state = useState(0);
const count = state[0];
const setCount = state[1];

• 如果新的 state 是用之前的 state 計算出，就要在 setState 裡寫一個 function，function 將接收先前的 state，並回傳一個已更新的值。

例如：

import React, { useState } from "react";
const Hookstate = () => {
  const [count, setCount] = useState(0);
  console.log("count : "+ count);
  return (
    <div>
      <h3>Hook - useState</h3>
      <p>You clicked {count} times</p>
      <button
        onClick={() => {
          setCount(count => count + 1);
          setCount(count => count + 1);
          setCount(count => count + 1);
        }}
      >
        Click
      </button>
      <br />
    </div>
  );
};
export default Hookstate;

在 setCount() 裡面放一個 function，它會自動去計算之前的值，執行上面的程式碼後，按下 click 時 count 會變成 3，再按一下會變成 6，每次都加 3。

如果是在 setCount() 裡面直接計算值，則每次的結果會被後面的結果覆蓋掉，例如：

import React, { useState } from "react";
const Hookstate = () => {
  const [count, setCount] = useState(0);
  console.log("count : "+ count);
  return (
    <div>
      <h3>Hook - useState</h3>
      <p>You clicked {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
          setCount(count + 1);
          setCount(count + 1);
        }}
      >
        Click
      </button>
      <br />
    </div>
  );
};
export default Hookstate;

執行上面的程式碼後，按下 click 時 count 會變成 1，再按一下變成 2，即使在 onClick 的 function 裡面寫了好幾次 setCount(count + 1)，最後結果都只會加 1。

參考資料：
https://zh-hant.reactjs.org/docs/hooks-reference.html#usestate
https://medium.com/hannah-lin/react-hook-%E7%AD%86%E8%A8%98-%E5%BE%9E%E6%9C%80%E5%9F%BA%E6%9C%AC%E7%9A%84-hook-%E9%96%8B%E5%A7%8B-usestate-useeffect-fee6582d8725